<template>
  <div
    class="panel-zone-bg "
  >
    <div class="little-title m-b-mini flex-between">
      特征统计
      <SwitchTab
        :tab-list="featureTabList"
        v-model="featureTab"
      />
    </div>
    <div class="d-flex-c full-height">
      <div class="flex-0 switch-button-tab-bg">
        <SwitchTab
          is-button
          :tab-list="featureTabButtonList"
          v-model="featureButtonTab"
        />
      </div>

      <div class="flex-1 overflow-hidden">
        <!-- 看是否做分页 -->
        <BKTable
          ref="grid"
          :columns="columns"
          :data="tableData"
          :has-pager="false"
          border="none"
          :highlight-current-row="true"
          :stripe="false"
          :has-seq="false"
          class="ysqjcdp-table"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
export default {
  name: 'FeatureStatistics',
  components: { SwitchTab },
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.featureTabButtonList = [{
      label: '长历时',
      value: 'd'
    },
    {
      label: '短历时',
      value: 'h'
    }]
    this.featureTabList = [
      {
        label: '入汛以来',
        value: '2'
      },
      {
        label: '今日以来',
        value: '1'
      }
    ]
    return {
      featureButtonTab: 'd',
      featureTab: '2',
      allData: [],
      tableData: []
    }
  },
  watch: {
    featureButtonTab: {
      handler () {
        this.changeDataType()
      }
    },
    featureTab: {
      immediate: true,
      handler () {
        this.fetchTableData()
      }
    }
  },
  mounted () {
  },
  methods: {
    // 特征统计
    async fetchTableData () {
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectRainFeature', {
        type: this.featureTab
      })
      this.allData = data
      this.changeDataType()
    },
    changeDataType () {
      this.tableData = this.allData.filter(item => item.type.endsWith(this.featureButtonTab))
    }
  }
}
</script>

<style lang="scss" scoped>
.rain-alarm-box {
  width: 220px;
  // max-height: 220px;
  .rain-alarm-item {
    width: 100%;
    height: 56px;
    background-image: url("~@/assets/images/ysqjcdp/rain-alarm-bg.png");
    background-size: 100% 100%;

    &:not(:last-child) {
      margin-bottom: 6px;
    }

    .rain-alarm-value {
      line-height: 20px;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 6px;

      &.red {
        color: #ff5a69;
      }
    }
  }
}
</style>
